<template>
    <div class="app-container">
        <!-- 卡片-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>人天审查</span>
            </div>

            <!-- 查询条件-->
            <el-form :inline="true" :model="selectParam" label-width="80px" class="demo-form-inline" size="small">
                <el-form-item label="所属部门:">
                    <el-select v-model="selectParam.deptName" placeholder="请选择所属部门" style="width: 290px" filterable>
                        <el-option label="全部" :value="null"></el-option>
                        <el-option v-for="item in depts" :label="item.deptName" :value="item.deptName" :key="item.id" style="width: 260px"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="项 目:">
                    <el-select v-model="selectParam.proNo" placeholder="请选择项目" style="width: 290px"  filterable>
                        <el-option label="全部" :value="null"></el-option>
                        <el-option
                                v-for="item in projects"
                                :key="item.id"
                                :label="item.proName"
                                :title="item.proName"
                                style="width: 280px"
                                :value="item.proNo">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="打卡日期:">
                    <el-date-picker type="date"
                                    placeholder="开始"
                                    v-model="selectParam.beginDate"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    style="width: 140px;">
                    </el-date-picker>
                    -
                    <el-date-picker type="date"
                                    placeholder="结束"
                                    v-model="selectParam.endDate"
                                    value-format="yyyy-MM-dd"
                                    format="yyyy-MM-dd"
                                    style="width: 140px;">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="float: right">
                    <el-button
                            type="primary"
                            @click="selectParamButton">查询
                    </el-button>
                    <el-button
                            type="primary"
                            v-if="userButtonIds.indexOf('log.logEdit.export') != -1"
                            @click="exportButton">导出
                    </el-button>
                    <el-button
                            type="primary"
                            v-if="userButtonIds.indexOf('log.logEdit.import') != -1"
                            @click="importButton">导入
                    </el-button>
                </el-form-item>
            </el-form>


            <el-table
                    :data="list"
                    border
                    size="small"
                    :header-cell-style="tableHeaderStyle"
                    style="width: 100%">
                <el-table-column
                        fixed
                        label="No."
                        type="index"
                        header-align="center"
                        align="center"
                        width="80">
                    <template slot-scope="scope">
                        {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed
                        prop="userName"
                        label="成员"
                        header-align="center"
                        align="center"
                        min-width="150">
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="所属部门"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        align="center"
                        min-width="150">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="打卡日期"
                        header-align="center"
                        align="center"
                        min-width="120">
                </el-table-column>

                <el-table-column
                        prop="sumPutinDaily"
                        label="投入人天"
                        header-align="center"
                        align="center"
                        min-width="100">
                    <template slot-scope="scope">
                        <el-link
                                type="primary"
                                @click="selectLoginfo(scope.row)">
                            <b>{{ scope.row.sumPutinDaily }}</b>
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页-->
            <div style="text-align:right;margin: 15px;margin-right: 0px">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="page.pageSize"
                        :current-page="page.pageNum"
                        @current-change="changeCurrentPage"
                        :total="page.pageCount">
                </el-pagination>
            </div>


            <!-- Table -->
            <el-dialog title="投入天数" :visible.sync="dialogTableVisible">
                <el-table
                        :data="infos"
                        :header-cell-style="tableHeaderStyle"
                        border
                        :key="key"
                        size="small"
                        show-summary
                        :summary-method="getSummaries"
                        style="margin-bottom: 20px">
                    <el-table-column
                            property="workDate"
                            header-align="center"
                            align="center"
                            label="日期">
                        <template slot-scope="s">
                            {{ getNowTimeByDate(s.row.workDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            property="proName"
                            header-align="center"
                            align="center"
                            label="项目">
                    </el-table-column>
                    <el-table-column
                            property="putinDaily"
                            label="投入人天"
                            header-align="center"
                            align="center"
                            width="150">
                    </el-table-column>
                </el-table>
            </el-dialog>

            <el-dialog title="导入" :visible.sync="dialogFormVisible" style="height: 600px;width: 800px;margin: auto" :key="import_key">
                <el-upload
                        :key="uploadKey"
                        class="upload-demo"
                        :drag="true"
                        ref="upload"
                        action="http://localhost:9525/pro/workdailyLog/importWorkDailyReviewDetail"
                        :http-request="fileHttpRequset"
                        list-type="text"
                        accept="application/vnd.ms-excel"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload"
                        :file-list="fileList"
                        :limit="1"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text"><em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip" style="color: red">只能上传xls/xlsx文件，且不超过10M</div>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="sure" size="small">确 定</el-button>
                </div>
            </el-dialog>

        </el-card>
    </div>

</template>

<script>

import {http_dropdownBox_depts} from '@/api/user'
import { http_import_log } from '@/api/logReviewAgain'
import {http_logEdit_list, http_logEdit_export, http_logEdit_info,} from '@/api/logEdit'
import {Message} from "element-ui";
import {tableHeaderStyle,} from '@/utils/constant'
import {http_prject_All_list} from "@/api/downBox";
import moment from "moment";


export default {
    data() {
        return {
            tableHeaderStyle: tableHeaderStyle,
            userButtonIds: JSON.parse(localStorage.getItem("user")).buttonIds,
            list: [],
            infos: [],
            depts: [],
            projects: [],
            key: new Date().getTime(),
            uploadKey: new Date().getTime(),

            page: {
                pageNum: null,
                pageSize: null,
                pageCount: null,
            },

            selectParam: {
                beginDate: this.getNowTime(),
                endDate: this.getNowTime(),
                isResign: null,
                userName: null,
                proNo: null,
                deptId: null,
                deptName: null,
                oldBeginDate: this.getNowTime(),
                oldEndDate: this.getNowTime(),
            },
            selectParamVersion: 0,
            proNo: null,

            dialogTableVisible: false,
            dialogFormVisible: false,
            import_key: new Date().getTime(),

            imageUrl: '',
            fileList: [],
            baseUrl: process.env.VUE_APP_BASE_API,
            file: null,
            uploadFlag: true,
            uploadLoading: false,

        }
    },
    methods: {
        http_list() {
            if (this.selectParamVersion > 0){
                this.page.pageNum = 1
            }
            http_logEdit_list(this.page, this.selectParam).then(result => {
                const {data} = result
                this.list = data.records
                this.page = {
                    pageNum: data.current,
                    pageSize: data.size,
                    pageCount: data.total,
                }
                this.selectParamVersion = 0
            })
        },
        http_infoList(param) {
            http_logEdit_info(param,this.selectParam.proNo).then(result => {
                const {data} = result
                this.infos = data
            })
        },
        http_dept_list() {
            http_dropdownBox_depts().then(result => {
                const {data} = result
                this.depts = data
            })
        },
        http_pro_list(){
            http_prject_All_list().then(result=>{
                const {data} = result
                // console.log(result)
                this.projects = data
            })
        },
        http_export() {
            // console.log(this.selectParam)
            http_logEdit_export(this.selectParam)
        },
        http_import() {
            http_import_log()
        },
        reviewButton_openDrawer(param) {
            this.drawer = true
        },
        selectLoginfo(param) {
            this.key = new Date().getTime()
            this.http_infoList(param)
            this.dialogTableVisible = true
        },
        changeCurrentPage(val) {
            this.page.pageNum = val
            this.http_list()
        },
        selectParamButton() {
            this.http_list()
        },
        exportButton() {
            this.http_export()
        },
        importButton() {
            this.import_key=new Date().getTime()
            this.uploadKey = new Date().getTime()
            this.file = null
            this.dialogFormVisible = true
            // this.http_import()
        },
        getNowTime() {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            var defaultDate = `${year}-${month}-${date}`;
            return defaultDate;
        },


        // --------------------------------------
        submitUpload() {
            this.$refs.upload.submit();
            // alert("tijiao ")
            // this.dialogFormVisible = false
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
            this.file = null
            this.uploadFlag = true
        },
        handlePreview(file) {
            // console.log(file);
        },
        beforeAvatarUpload(file) {
            // console.log(file);
            let flag = false
            const fileName = file.name
            let lastC = fileName.substring(fileName.length-4)
            let lastD = fileName.substring(fileName.length-5)
            // console.log('c',lastC)
            // console.log('d',lastD)
            if(file.type == null || file.type ==''){
                if(lastC === '.xls'){
                    flag = true
                }
                if(lastD  === '.xlsx'){
                    flag = true
                }
            }

            const isFileType = file.type ? (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') : (flag == true);
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isFileType) {
               this.$message.error('上传文件只能是 xls 或 xlsx 格式');
            }

            if (!isLt10M) {
                this.$message.error('上传文件大小不能超过 10MB');
            }
            return isFileType && isLt10M;
        },
        sure() {
            const fd = new FormData()
            if (this.file != null) {
                fd.append('file', this.file.file)// 传文件
                this.uploadLoading = true
                const loading = this.$loading({
                    lock: true,
                    text: '上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                http_import_log(fd).then(result => {
                    const {success, message} = result
                    if (success) {
                        Message.success(message)
                        this.uploadKey = new Date().getTime()
                        this.uploadLoading = false
                        this.http_list()
                        this.http_pro_list()
                        this.dialogFormVisible = false
                        loading.close();
                    } else {
                        Message.error("导入失败")
                        this.uploadLoading = false
                        loading.close();
                    }
                }).catch(error=>{
                    this.$refs.upload.clearFiles();
                    this.file = null
                    this.uploadLoading = false
                    loading.close();
                })
            }
        },
        fileHttpRequset(file) {
            // console.log("1:", file);
            this.file = file
            this.uploadFlag = false
        },
        getNowTimeByDate(date1) {
            let now = new Date(date1)
            let year = now.getFullYear(); //得到年份
            let month = now.getMonth(); //得到月份
            let date = now.getDate(); //得到日期
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            let defaultDate = `${year}-${month}-${date}`;
            return defaultDate;
        },
        getTimeFormat(date){
            return date && moment(date).format('HH:mm') || '未打卡'
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                if (index == 1){
                    sums[index] = '/';
                }
                if (index == 2 || index == 3) {
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = 'N/A';
                    }
                }
            });
            return sums;
        },

    },
    created() {
        this.http_list()
        this.http_dept_list()
        this.http_pro_list()
    },
    watch: {
        selectParam: {
            handler(selectParam,oldSelectParam){
                this.selectParamVersion = 1
                if (selectParam.beginDate && selectParam.endDate) {
                    let x= 0
                    if (selectParam.beginDate != selectParam.oldBeginDate) x = 1
                    if (selectParam.endDate != selectParam.oldEndDate ) x = 2
                    if ( x > 0 && new Date(selectParam.beginDate).getTime() > new Date(selectParam.endDate).getTime()) {
                        Message.warning("打卡日期：开始不能大于结束")
                        if (x == 1) selectParam.beginDate = null
                        if (x == 2) selectParam.endDate = null
                    }
                }
                selectParam.oldBeginDate = selectParam.beginDate
                selectParam.oldEndDate = selectParam.endDate
            },
            deep:true
        }
    }
}
</script>


<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 100%;
}

.el-table th.gutter {
    display: table-cell !important
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader {
    text-align: center;
}

.el-dialog__body {
    padding: 10px 30px;
}

.el-upload-list__item-name {
    color: dodgerblue !important;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
}

.el-icon-document {
    color: dodgerblue !important;
}

.circle1 {
    border-radius: 50%;
    display: inline-block;
    margin-right: 1px;
    width: 10px;
    height: 10px;
    background: #b3d8ff;
    /* 宽度和高度需要相等 */
}

.circle2 {
    border-radius: 50%;
    display: inline-block;
    margin-right: 1px;
    width: 10px;
    height: 10px;
    background: mediumturquoise;
    /* 宽度和高度需要相等 */
}


</style>
<style lang="less" scoped>
.warpper_item{
    display: flex;
    flex-direction: column;
    .start, .end{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 50%;
        transform: translateX(-50%);
        .circle1{
            background: rgba(0,0,0,0.25);
            margin-right: 6px;
        }
    }
}
</style>
